<template>
  <div class="settings-page">
    <h2 class="page-title">账号设置</h2>
    <el-tabs v-model="activeTab" class="settings-tabs">
      <el-tab-pane label="修改密码" name="password">
        <el-form :model="passwordForm" label-width="100px" class="settings-form">
          <el-form-item label="当前密码">
            <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入当前密码" show-password />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码（至少6位）" show-password />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" show-password />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleChangePassword">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="隐私设置" name="privacy">
        <el-form label-width="120px" class="settings-form">
          <el-form-item label="个人资料可见">
            <el-switch v-model="privacySettings.profileVisible" />
          </el-form-item>
          <el-form-item label="允许私信">
            <el-switch v-model="privacySettings.allowMessage" />
          </el-form-item>
          <el-form-item label="显示在线状态">
            <el-switch v-model="privacySettings.showOnline" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSavePrivacy">保存设置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('password')

const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const privacySettings = reactive({
  profileVisible: true,
  allowMessage: true,
  showOnline: true
})

const handleChangePassword = () => {
  if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
    ElMessage.warning('请填写完整信息')
    return
  }
  if (passwordForm.newPassword.length < 6) {
    ElMessage.warning('新密码长度至少6位')
    return
  }
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.warning('两次输入的密码不一致')
    return
  }
  console.log('修改密码:', passwordForm)
  ElMessage.success('密码修改成功')
  // 调用 API 修改密码
}

const handleSavePrivacy = () => {
  console.log('保存隐私设置:', privacySettings)
  ElMessage.success('隐私设置保存成功')
  // 调用 API 保存
}
</script>

<style scoped lang="less">
.settings-page {
  .page-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 32px 0;
  }

  .settings-tabs {
    .settings-form {
      max-width: 500px;
      margin-top: 24px;
    }
  }
}
</style>
